<template>
  <div class="box">
    <div class="onebox">
      <div class="left">
        <img src="../../../public/img/图层24.png" alt="" />
      </div>
      <div class="right">
        <p>樊登读书首档日更讲书栏目</p>
        <span>引领3亿人的美好生活方式</span>
      </div>
    </div>
    <!-- 图片 -->
    <div class="imgs">
      <img src="../../../public/img/图层3.png" alt="" />
    </div>

    <!-- 文字 -->
    <div class="text">
      <div class="left" :class="{ active: state.done == 1 }" @click="text1">
        好书“慢读”
      </div>
      <div class="right" :class="{ active: state.done == 2 }" @click="text2">
        邀你参加
      </div>
    </div>
    <p style="margin-left: 30px; color: #c8ced5; margin-bottom: 7px">
      U P D A T E
    </p>

    <p
      style=" font:17px/16px 'PingFang-SC-Medium;font-weight:bold;letter-spacing: 3px;margin-left: 30px;margin-bottom: 15px"
    >
      当前在更
    </p>

    <!-- 当前在更 -->
    <div class="this">
      <ul>
        <li v-for="(item, index) in 1" :key="index">
          <div class="leftimg">
            <img src="../../../public/img/图层44.png" alt="" />
          </div>
          <div class="righttext">
            <h1>《关雎》就是忠贞的爱情模式</h1>
            <p>《年轻人的国文课》</p>
            <div>
              <span>读懂国文经典,原来这么简单！</span>
              <!-- <img src="../../../public/img/播放键.png" alt="" /> -->
            </div>
          </div>
        </li>
      </ul>
    </div>

    <p style="margin-left: 30px; color: #c8ced5; margin-bottom: 7px">
      RECOMMEND
    </p>

    <p
      style=" font:17px/16px 'PingFang-SC-Medium;font-weight:bold;letter-spacing: 3px;margin-left: 30px;margin-bottom: 15px"
    >
      编辑推荐
    </p>

    <!-- 编辑推荐 -->
    <div class="editlist">
      <ul>
        <li v-for="(item, index) in state.images" :key="index">
          <div class="leftimg">
            <img :src="item.url" alt="" />
          </div>
          <div class="righttext">
            <h1>{{ item.title }}</h1>
            <p class="bb">{{ item.book }}</p>
            <div>
              <span>{{ item.msg }}</span>
              <!-- <img src="../../../public/img/播放键.png" alt="" /> -->
              <p class="string">{{ item.num }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <p style="margin-left: 30px; color: #c8ced5; margin-bottom: 7px">
      FREEBOOK
    </p>

    <p
      style=" font:17px/16px 'PingFang-SC-Medium;font-weight:bold;letter-spacing: 3px;margin-left: 30px;margin-bottom: 15px"
    >
      今日限免
    </p>

    <!-- 今日限免 -->
    <div class="world">
      <div class="left">
        <h1>人生不必太用力，坦率地接受每一天</h1>
        <span>《人间值得》</span>
        <p>你只需要对自己交代，如何去生活，去过怎样的人生。</p>
      </div>
      <div class="right">
        <img src="../../../public/img/人间.png" alt="" />
      </div>
    </div>

    <!-- 李蕾 -->
    <p style="margin-left: 30px; color: #c8ced5; margin-bottom: 7px">
      I N V I T A T I O N
    </p>

    <p
      style=" font:17px/16px 'PingFang-SC-Medium;font-weight:bold;letter-spacing: 3px;margin-left: 30px;margin-bottom: 20.4px"
    >
      李蕾邀你参加
    </p>

    <!-- 李蕾图片 -->
    <div class="banner1">
      <img src="../../../public/img/图层77.png" alt="" />
    </div>

    <p style="margin-left: 30px; color: #c8ced5; margin-bottom: 7px">
      M Y N A M E I S L I L E I
    </p>

    <p
      style=" font:17px/16px 'PingFang-SC-Medium;font-weight:bold;letter-spacing: 3px;margin-left: 30px;margin-bottom: 35px"
    >
      你好么? 我是李蕾
    </p>

    <!-- 李蕾是谁 -->
    <div class="whos">
      <div class="top">李蕾是谁？</div>
      <div class="bottom"></div>
    </div>
    <div class="img1">
      <img src="../../../public/img/图层88.png" alt="" />
    </div>

    <!-- 多列文字 -->
    <div class="texts">
      樊登读书app<span style="color: #e59136">独家签约老师</span
      >，李蕾慢读首部讲书《断舍离》上线三个月，播放量<span
        style="color: #e59136"
        >70万+</span
      >，好评如潮。首部线上声音剧《浮生六记》播放量<span style="color: #e59136"
        >80万+</span
      >，并走进线下空间，深受听众喜爱。
    </div>

    <div class="img2">
      <img src="../../../public/img/图层91.png" alt="" />
      <p>《浮生六记》线下声音剧现场</p>
    </div>
    <div class="mtests">
      <p>畅销书作家</p>
    </div>
    <!-- 多列文字 -->
    <div class="texts" style="margin-bottom: 28.5px">
      先后担任陕西电视台《开坛》、上海纪实频道《风言锋语》、中央电视台综合和屏道《1起聊聊》等栏目主持人<span
        style="color: #e59136"
        >15年电视主持经验，20年媒体从业经历，</span
      >多次获奖。
    </div>
    <div class="threeimgs">
      <img src="../../../public/img/图层16.png" alt="" />
      <img src="../../../public/img/图层17.png" alt="" class="twos" />
      <img src="../../../public/img/图层18.png" alt="" />
    </div>
    <p class="pp">部分作品展示</p>
    <div class="mtests" style="margin-bottom: 19.5px">
      <p>知名谈话节目主持人</p>
    </div>
    <!-- 多列文字 -->
    <div class="texts" style="margin-bottom: 29px">
      先后担任陕西电视台《开坛》、上海纪实频道《风言锋语》、中央电视台综合频道《一起聊聊》等栏目主持人，<span
        style="color: #e59136"
        >15年电视主持经验，20年媒体从业经历，</span
      >多次获奖。
    </div>
    <!-- 四个页面 -->
    <div class="lastpage">
      <div class="page">
        <div class="sp" v-for="(item, index) in 4" :key="index">
          <img src="../../../public/img/图层11.png" alt="" />
          <p>《唐诗之城》圆桌论坛</p>
          <span>李蕾x马未都x钱文忠</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../../util/http.js";
import { onMounted, reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      images: [],
      done: 1,
    });
    const text1 = () => {
      state.done = 1;
    };
    const text2 = () => {
      state.done = 2;
    };
    onMounted(() => {
      getlist();
    });
    const getlist = async () => {
      const reslunbo = await http.get(
        "http://121.199.64.192:3000/api/slowread"
      );
      state.images = reslunbo.data.result;
    };
    return {
      state,
      text1,
      text2,
      getlist,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 0;
  .onebox {
    width: 100%;
    height: 60.5px;
    background: #eef9ff;
    padding: 9.5px 0px 11px 14.5px;
    display: flex;
    .left {
      width: 41px;
      height: 40.5px;
      margin-right: 8.5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      padding-top: 5px;
      p {
        font: 11px/11px "PingFang-SC-Regular";
        color: #66768d;
        margin-bottom: 7px;
      }
      span {
        display: block;
        font: 12px/12px "PingFang-SC-Regular";
        color: #1d3759;
      }
    }
  }
  .imgs {
    width: 100%;
    height: 126px;
    margin-bottom: 30px;
    img {
      width: 100%;
      height: 126px;
    }
  }
  .text {
    padding-left: 25px;
    display: flex;
    text-align: center;
    height: 36.5px;
    position: relative;
    margin-bottom: 25px;
    .left {
      position: absolute;
      bottom: 0;
      width: 168px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      font: 12px "PingFang-SC-Regular";
      vertical-align: middle;
      display: flex;
      height: 27px;
      align-items: center;
      justify-content: center;
      background: #d1e6ff;
      color: black;
    }
    .right {
      position: absolute;
      left: 190px;
      bottom: 0;
      width: 166.5px;
      font: 12px "PingFang-SC-Regular";
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      display: flex;
      align-items: center;
      height: 27px;
      background: #d1e6ff;
      justify-content: center;
      color: black;
    }
    .active {
      font-size: 15px;
      font-weight: bold;
      height: 36.5px;
      background: #ddf2ff;
    }
  }
  /* 当前在更 */
  .this {
    ul {
      li {
        padding: 0 25px 0 26.5px;
        height: 114px;
        display: flex;
        margin-bottom: 25px;
        .leftimg {
          width: 85px;
          height: 114px;
          background: chartreuse;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .righttext {
          padding-top: 5px;
          h1 {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #444243;
            line-height: 15px;
            margin-bottom: 10px;
          }
          p {
            width: 236px;
            font-size: 14px;
            line-height: 16px;
            color: #a9a9a9;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 指定行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 40px;
          }
          div {
            width: 245px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0;
            span {
              font-size: 11px;
              font-weight: bold;
              color: #414e5f;
              width: 165px;
              height: 21.5px;
              background: #ebf8ff;
              border-radius: 7.5px;
              line-height: 21.5px;
              text-align: center;
            }
            img {
              width: 16px;
              height: 16px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  /* 编辑推荐 */
  .editlist {
    margin-bottom: 37px;
    ul {
      li {
        padding: 0 25px 0 26.5px;
        height: 114px;
        display: flex;
        margin-bottom: 13px;
        .leftimg {
          width: 85px;
          height: 114px;
          background: chartreuse;
          margin-right: 15px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .righttext {
          padding-top: 5px;
          h1 {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #444243;
            line-height: 15px;
            margin-bottom: 10px;
          }
          .bb {
            width: 236px;
            font-size: 14px;
            line-height: 16px;
            color: #a9a9a9;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 指定行数*/
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 40px;
          }
          div {
            width: 245px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0;
            span {
              font-size: 11px;
              font-weight: bold;
              color: #414e5f;
              width: auto;
              height: 21.5px;
              background: #ebf8ff;
              border-radius: 7.5px;
              line-height: 21.5px;
              text-align: center;
            }
            .string {
              font-size: 10px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #213858;
              line-height: 10px;
            }
          }
        }
      }
    }
  }
  /* 人间值得 */
  .world {
    border: 1px solid silver;
    border-radius: 5px;
    width: 318px;
    height: 134px;
    margin: auto;
    display: flex;
    margin-bottom: 25.5px;
    .left {
      height: 100%;
      width: 215px;
      padding: 17.5px 11.5px 5px 13px;
      h1 {
        font: 14px/17px "PingFang-SC-Bold";
        color: #14284a;
        font-weight: bold;
        margin-bottom: 9px;
      }
      span {
        font: 11px/11px "PingFang-SC-Bold";
        color: #879198;
        margin-bottom: 27px;
        display: block;
      }
      p {
        height: 30.5px;
        width: 182.5px;
        padding: 0 6.5px 0px 6px;
        font: 11px/13px "PingFang-SC-Bold";
        color: #606e76;
        background: #f3fbfe;
      }
    }
    .right {
      padding: 6px 4px 5.5px 3.5px;
      height: 125px;
      width: 99px;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
  /* 李蕾 */
  .banner1 {
    width: 308px;
    height: 101px;
    margin: auto;
    margin-bottom: 50px;
    img {
      height: 100%;
      width: 100%;
    }
  }

  /* 李蕾是谁 */
  .whos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .top {
      width: 122px;
      height: 34px;
      border-radius: 10px;
      background: #201d0f;
      text-align: center;
      font: 18px/34px "PingFang-SC-Medium";
      color: #fff;
    }
    .bottom {
      width: 8px;
      border: 8px solid #201d0f;
      border-color: #201d0f transparent transparent transparent;
    }
  }
  .img1 {
    width: 100%;
    height: 292px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /* 多列文字 */
  .texts {
    width: 315.5px;
    height: 149px;
    margin: auto;
    background: #f6d98d;
    border-radius: 10px;
    padding: 16px 24.5px 0px 18px;
    font: 15px/24px "PingFang-SC-Regular";
    font-weight: bold;
    margin-bottom: 22px;
  }
  .img2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40.5px;

    img {
      width: 247px;
      height: 165px;
      margin-bottom: 10px;
    }
    p {
      font: 8px/8px "PingFang-SC-Regular";
      color: #a9a9a9;
    }
  }
  .mtests {
    display: flex;
    justify-content: center;
    margin-bottom: 17px;
    p {
      font: 17px/16px "PingFang-SC-Medium";
      color: black;
      font-weight: bold;
    }
    ::after {
      content: "";
      width: 5px;
      height: 5px;
      background: #f6e5ac;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
      margin-left: 10px;
    }
    ::before {
      content: "";
      width: 5px;
      height: 5px;
      display: inline-block;
      background: #f6e5ac;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  /* 三张图片 */
  .threeimgs {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    img {
      width: 79px;
      height: 113.5px;
    }
    .twos {
      margin: 0px 36px 12.5px 36px;
    }
  }
  .pp {
    font: 8px/8px "PingFang-SC-Regular";
    color: #a9a9a9;
    text-align: center;
    margin-bottom: 39px;
  }
  /* 四张图片 */
  .lastpage {
    .page {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .sp {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 13px;
        img {
          width: 151px;
          height: 101px;
          border-radius: 10px;
          margin-bottom: 11.5px;
        }
        p {
          font: 10px/10px "PingFang-SC-Regular";
          color: #3d3e39;
          margin-bottom: 7px;
        }
        span {
          font: 8px/8px "PingFang-SC-Regular";
          color: #a9a9a9;
          display: block;
          margin-bottom: 16.5px;
        }
      }
    }
  }
}
</style>
